<template>
  <div class="videoSurveill">
    <stitle :bg="bg" text="视频监控" @sclick="sclickhandle" />
    <div class="tablecon">
      <el-table :data="tableData" style="width: 100%" height="650px">
        <el-table-column prop="index" label="点位" width="60px">
        </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="area" label="所在区域"> </el-table-column>
        <el-table-column prop="state" label="状态" width="80px">
          <template slot-scope="scope">
            <span :class="`${getState(scope.row.state).cls}`">{{
              getState(scope.row.state).text
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <i class="videofunc" @click="handleClick(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import stitle from "@/components/common/stitle";
import { createPoi, delPoi } from "@/utils/map";
import { pointProp } from "@/assets/js/pointProp";
export default {
  name: "videoSurveill",
  components: {
    stitle,
  },
  data() {
    return {
      bg: require("@/assets/images/DispatchCommand/videoSurveill.png"),
      tableData: [
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 1,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 2,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 1,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 1,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
        {
          index: "1号",
          type: "枪机",
          area: "车间一",
          state: 0,
        },
      ],
      isclick: false,
    };
  },
  methods: {
    sclickhandle() {
      if (!this.isclick) {
        let _arr = [
          {
            y: 30.604064741812415,
            x: 120.51653668621397,
            monitorName: "视频1",
          },
          {
            y: 30.603270767777538,
            x: 120.5165772794493,
            monitorName: "视频2",
          },
          {
            y: 30.60464388862265,
            x: 1120.5177431527058,
            monitorName: "视频3",
          },
          {
            y: 30.604083193323035,
            x: 120.51775074013837,
            monitorName: "视频4",
          },
          {
            y: 30.604153342645873,
            x: 120.51735049337985,
            monitorName: "视频5",
          },
          {
            y: 30.603687383156508,
            x: 120.51736463988561,
            monitorName: "视频6",
          },
          {
            y: 30.603209487036516,
            x: 120.5172458246754,
            monitorName: "视频7",
          },
          {
            y: 30.604078269915963,
            x: 120.51801094165354,
            monitorName: "视频8",
          },
          {
            y: 30.60292125471578,
            x: 120.51648074850945,
            monitorName: "视频9",
          },
          {
            y: 30.60227536721127,
            x: 120.51703324505124,
            monitorName: "视频10",
          },
          {
            y: 30.60224467334593,
            x: 120.5188184547613,
            monitorName: "视频11",
          },
        ];
        this.GLOBAL.poiContainer["VIDEO"] = [];
        _arr.forEach((item) => {
          createPoi(pointProp["VIDEO"].prop(item));
        });
        this.isclick = true;
      } else {
        delPoi("VIDEO");
        if (this.GLOBAL.poiLayerObj) {
          this.GLOBAL.poiLayerObj.deleteObject();
        }
        this.isclick = false;
      }
    },
  },
  mounted() {},
  computed: {
    getState() {
      return function (param) {
        return param === 0
          ? { text: "正常", cls: "normal" }
          : param === 1
          ? { text: "修复中", cls: "repair" }
          : { text: "故障", cls: "fault" };
      };
    },
  },
};
</script>

<style lang="scss"  scoped>
.videoSurveill {
  width: 100%;
  padding-left: 60px;
  box-sizing: border-box;
  .videofunc {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("~@/assets/images/DispatchCommand/videofunc.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 4px;
    cursor: pointer;
  }
  .normal {
    padding: 2px;
    box-sizing: border-box;
    background: rgba(0, 104, 193, 0.33);
    border: 1px solid #117ad3;
    border-radius: 2px;
    color: #09a0ff;
    font-size: 12px;
  }
  .repair {
    padding: 2px;
    box-sizing: border-box;
    background: rgba(192, 126, 25, 0.33);
    border: 1px solid #f8b551;
    border-radius: 2px;
    color: #ffb109;
    font-size: 12px;
  }
  .fault {
    padding: 2px;
    box-sizing: border-box;
    background: rgba(136, 0, 0, 0.33);
    border: 1px solid #db1414;
    border-radius: 2px;
    color: #db1414;
    font-size: 12px;
  }
}
</style>